<template>
  <div class="chatRoomBackground">
    <div :style="{ 'overflow-y': 'auto', height: '85%' }">
      <div v-for="item in valueList" :key="item.name" style="padding: 10px">
        <div style="font-size: 12px; color: #a5a5a5">
          {{ item.name }}
        </div>
        <div
          style="
            background-color: #fff;
            padding: 10px;
            border-radius: 5px;
            display: inline-block;
          "
        >
          {{ item.value }}
        </div>
      </div>
    </div>

    <div class="footViewStyle">
      <el-input
        v-model="value"
        placeholder=""
        type="textarea"
        :autosize="{ minRows: 4, maxRows: 4 }"
      >
      </el-input>
      <el-button type="primary" @click="sendOut">发送</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      valueList: [{ name: "guoyaohang", value: "降龙十八掌" }],
      //底部框高度
      scrollerHeight: "",
    };
  },
  mounted() {
  },
  methods: {
    //发送消息
    sendOut() {
      if (this.value) {
        this.valueList.push({
          name: this.setCookie(),
          value: this.value,
        });
      } else {
        this.$message.error("不能发送空白信息");
      }
      let footViewHeight = document.querySelector(".footViewStyle");
      console.log(footViewHeight.offsetHeight);
    },
    //获取cookie 用户名
    setCookie(cname, cvalue, exdays) {
      var arrstr = document.cookie.split("; ");
      for (var i = 0; i < arrstr.length; i++) {
        var temp = arrstr[i].split("=");
        if (temp[0] == "username") return unescape(temp[1]);
      }
      return "";
    },
  },
  watch() {},
  computed: {},
};
</script>

<style>
.chatRoomBackground {
  height: 100vh;
  background-color: rgb(248, 248, 248);
}
.footViewStyle {
  /*底部视图*/
  width: 100%;
  position: fixed;
  bottom: 0;
  position: relative;
}
</style>